<template>
  <div class="test1-container">
     <el-table :data="tableData" style="width:850px;margin:0 auto;margin-top:80px;" border :row-style="tableRowStyle"
    :header-cell-style="tableHeaderColor" :height="tableHeight">
      <el-table-column prop="date" label="地址" width="300" align="right" header-align="center">
      </el-table-column>
      <el-table-column prop="name" label="感染人数" width="250" align="center" header-align="center">
      </el-table-column>
      <el-table-column prop="address" label="治愈人数" width="300" align="left" header-align="center" show-overflow-tooltip >
      </el-table-column>
    </el-table>
    
  </div>
</template>
<script>
export default {
  name:'test1',
    data() {
      return {
        tableHeight:'',
        tableData: [
        {
          date: '安徽',
          name: '十八',
          address: '166'
        }, 
        {
          date: '甘肃',
          name: '二十',
          address: '177'
        }, 
        {
          date: '江苏',
          name: '零',
          address: '28'
        }, 
        {
          date: '湖北',
          name: '一千三',
          address: '1516'
        },
        {
          date: '重庆',
          name: '一百八',
          address: ' 188'
        }, 
        {
          date: '辽宁',
          name: '一百六',
          address: '128'
        }
        ],
      }
   },
   created(){
     this.tableHeight = window.innerHeight-500
   },
   methods:{
     // 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: #F7F6Fd'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500;'
      }
    }
   }
}
</script>
<style  scoped>


</style>